<template>
  <div>
    <!-- @header Start-->
    <div class="lay_top">
      <div class="lay_top_inner" style="width: 688px">
        <h1 class="logo text_hide">QQ登录</h1>
        <div class="lat_top_other">
          <a href="http://connect.qq.com" target="_blank" title="什么是QQ登录"
            ><i class="icon_help_white"></i>QQ登录</a
          >
          <span class="line">|</span>
          <a
            href="http://connect.qq.com/toc/auth_manager?from=auth"
            id="auth_manager_link"
            target="_blank"
            title="登录授权管理"
            >授权管理</a
          >
          <span class="line">|</span>
          <a
            href="http://connect.qq.com/manage"
            target="_blank"
            title="申请接入"
            >申请接入</a
          >
        </div>
      </div>
    </div>
    <!-- @header End -->
    <div id="combine_page" style="width: 688px" class="web_login">
      <div class="page_login combine_page_children float_left border_right">
        <div class="lay_login_form">
          <div class="inputBox">
            <h2>账号密码登录</h2>
            <form
              id="loginform"
              autocomplete="off"
              name="loginform"
              action=""
              method="post"
              target="0"
              class="login_form"
            >
              <div class="uinArea" id="uinArea">
                <label
                  class="input_tips"
                  id="uin_tips"
                  for="u"
                  data-onlyqq="QQ号码"
                  style="display: none"
                  >支持QQ号/邮箱/手机号登录</label
                >
                <div  :class="uinAreaBol?'inputOuter_focus':'inputOuter'">
                  <input
                    type="text"
                    class="inputstyle"
                    id="u"
                    name="u"
                    value=""
                    tabindex="1"
                    @focus="foucs(1)"
                    @blur="blur(1)"
                     v-model="from.username"
                  />
                  <a
                    class="uin_del"
                    id="uin_del"
                    href="javascript:void(0);"
                    style="display: block"
                  ></a>
                </div>
                <ul
                  class="email_list"
                  id="email_list"
                  style="display: none"
                ></ul>
              </div>
              <div class="pwdArea" id="pwdArea">
                <label
                  v-if="from.password.length===0"
                  :class="passBol?'input_tips_focus':''"
                  class="input_tips"
                  id="pwd_tips"
                  for="p"
                  style="display: block"
                  >密码</label
                >
                <div :class="passBol?'inputOuter_focus':'inputOuter'">
                  <input
                    type="password"
                    class="inputstyle password"
                    id="p"
                    name="p"
                    value=""
                    maxlength="16"
                    tabindex="2"
                    @focus="foucs(2)"
                    @blur="blur(2)"
                    v-model="from.password"
                  />
                </div>
                <div
                  class="lock_tips"
                  id="caps_lock_tips"
                  style="display: none"
                >
                  <span class="lock_tips_row"></span>
                  <span>大写锁定已打开</span>
                </div>
              </div>

              <div class="submit">
                <a
                  class="login_button"
                  href="javascript:void(0);"
                  hidefocus="true"
                  ><input
                    type="submit"
                    tabindex="6"
                    value="授权并登录"
                    class="btn"
                    id="login_button"
                /></a>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="page_accredit combine_page_children float_left">
        <div class="lay_main" id="lay_main">
          <div class="lay_accredit_con">
            <p class="cnt_wording"></p>
            <p class="app_site_wording">
              <a
                class="accredit_site"
                id="accredit_site_link"
                href="https://addon.dismall.com/"
                target="_blank"
                >DisMall应用中心</a
              >将获得以下权限：
            </p>
            <div class="accredit_info" id="accredit_info">
              <ul class="accredit_info_op">
                <li class="select_all_li">
                  <input
                    type="checkbox"
                    id="select_all"
                    class="checkbox oauth_checkbox_all"
                    hidefocus="true"
                    checked="checked"
                  />
                  <label class="oauth_item_title" for="select_all">全选</label>
                </li>

                <li>
                  <input
                    name="api_choose"
                    hidefocus="true"
                    type="checkbox"
                    class="checkbox oauth_checkbox"
                    id="item_80901010"
                    value="80901010"
                    title="默认授权 不可更改"
                    checked=""
                    disabled=""
                  />
                  <label for="item_80901010" class="oauth_item_title"
                    >获得您的昵称、头像、性别</label
                  >
                </li>
              </ul>
            </div>
            <div class="oauth_tips_div">
              <p class="oauth_tips">
                授权后表明你已同意
                <a href="http://connect.qq.com/agreement_chs" target="_blank"
                  >QQ登录服务协议</a
                >
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {

  data () {
    return {
      uinAreaBol: false,
      passBol: false,

      from: {
        username: '',
        password: ''
      }
    }
  },
  created () {

  },
  methods: {
    foucs (val) {
      if (val === 1) {
        this.uinAreaBol = true
      } else if (val === 2) {
        this.passBol = true
      }
    },
    blur (val) {
      if (val === 1) {
        this.uinAreaBol = false
      } else if (val === 2) {
        this.passBol = false
      }
    }
  }

}
</script>

<style scoped>
input{
  outline: none;
}
html,
body,
div,
ul,
li,
input {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

li {
  list-style: none;
}

iframe {
  overflow-x: hidden;
}

html,
body {
  background-color: #fff;
  color: #555;
  height: 100%;
  font-family: "Microsoft Yahei", Tahoma, sans-serif;
  line-height: 1.333;
  font-size: 12px;
  overflow: auto;
}
.inputBox {
  width: 370px;
  height: 322px;
}
.inputBox_ {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.web_login {
    position: relative;

}
.web_login .login_form {
    width: 272px;
        margin: 0 auto;
}
.web_login .uinArea {
    height: 55px;
    position: relative;
    z-index: 10;
}
.web_login .input_tips{
    position: absolute;
    top: 13px;
    top: 15px;
    left: 13px;
    font-size: 14px;
    line-height: 16px;
    color: #aaa;
    cursor: text;
}
.input_tips_focus{
  color: #ddd !important;
}
.web_login .inputOuter {
    border-radius: 2px;
    background: 0 0;
    width: 270px;
    height: 38px;
        border: 1px solid #CBCDD1;
}
.web_login .inputOuter_focus {
    border-radius: 2px;
    background: 0 0;
    width: 270px;
    height: 38px;
    border: 1px solid #1e6fff;
}
.web_login .inputstyle {
    width: 258px;
    position: relative;
    top: 2px;
    left: 2px;
    height: 18px;
    padding: 10px 0 10px 10px;
    line-height: 18px;
    border: none;
    background: 0 0;
    color: #333;
    font-family: Verdana,Tahoma,Arial;
    font-size: 16px;
}
.web_login .pwdArea {
    height: 55px;
    position: relative;
    z-index: 3;
}
.web_login .submit {
    background-color: rgb(30, 111, 255);
    height: 41px;
    border-radius: 2px;
        position: relative;
}
.web_login .login_button {
    position: absolute;
    left: 0;
    outline: 0;
    width: 100%;
}
.web_login .login_button .btn {
    color: rgb(255, 255, 255);
    height: 41px;
    line-height: 35px;
    font-size: 17px;
    letter-spacing: -2px;
}
.web_login .login_button .btn {
    width: 100%;
    height: 40px;
    line-height: 35px;
    border: none;
    font-size: 17px;
    font-weight: 400;
    font-family: "Microsoft Yahei","微软雅黑",SimHei,"黑体","Hiragino Sans GB",STHeiTi,sans-serif;
    color: #fff;
    background: 0 0;
    cursor: pointer;
}
.text_hide {
  line-height: 500px;
  overflow: hidden;
}

.lay_top_inner {
  max-width: 688px;
  margin: 0 auto;
  min-width: 305px;
  width: auto !important;
  width: 688px;
}
.lay_top {
  overflow: hidden;
  height: 48px;
  background: #51b7ec;
}
.lay_top .logo {
  float: left;
  height: 60px;
}
.lay_top .lat_top_other {
  float: right;
  margin-top: 15px;
  text-align: right;
  margin-right: 47px;
}
.lay_top .lat_top_defined {
  right: 130px;
}
.lay_top a.help {
  display: block;
  color: #fff;
  vertical-align: middle;
  margin-top: 4px;
}

.lay_main {
  margin-left: 27px;
  *zoom: 1;
}

.lay_top .logo {
  width: 109px;
  height: 42px;
  margin-top: 3px;
  margin-left: 40px;
  background-image: url("https://imgcache.qq.com/open/connect/widget/pc/login/img/qqlogo_2021.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.lat_top_other {
  color: #cfe1ea;
}
.lat_top_other a {
  color: #fff;
}
.lat_top_other a:hover {
  color: #c4e6f9;
}
.lat_top_other a,
.lat_top_other span {
  display: inline-block;
}

.accredit_info_op li {
  height: 31px;
  border: 1px;
  color: #666;
  *zoom: 1;
}
.accredit_info_op .ui_icon {
  position: absolute;
  left: 0;
  top: 8px;
  width: 30px;
  height: 30px;
}

#combine_page {
  max-width: 688px;
  width: 688px;
  margin: 5px auto 0 auto;
}
.float_left {
  float: left;
}
.align {
  margin: 0 auto;
}

.oauth_item_title {
  display: block;
  float: left;
  height: 100%;
  line-height: 31px;
  margin-left: 10px;
}
.oauth_checkbox_all,
.oauth_checkbox {
  display: block;
  float: left;
  height: 100%;
  width: 13px;
}

.select_all_li {
  border-top: 1px dotted #e2e2e2 !important;
  border-bottom: 1px dotted #e2e2e2 !important;
}
.border_right {
  border-right: 1px dotted #e3e3e3;
}

.lay_login_form .wording_timeout {
  margin-top: 5px;
}
.lay_login_form .wording_ch {
  margin-top: 15px;
}
.cnt_wording {
  margin-bottom: 16px;
}
</style>
